{{Template:SZPT-CHINA/head}}
<!-- 头部 -->
<html>

<head>
    <!-- <meta name="viewport"
        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> -->
</head>

<!-- 导入 -->
<!-- BEGIN-jquery -->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<!-- END-jquery -->
<!-- <script>

    window.onload = window.onscroll = function () {

        var navbar = document.getElementById("navbar");
        console.log("123")
        var st = document.body.scrollTop || document.documentElement.scrollTop;
        var deh = document.documentElement.clientHeight;
        navbar.style.top = st + deh - navbar.offsetHeight + "px";

    }
</script> -->
<!-- BEGIN-JS -->
<script type="text/javascript">
    var docWidthAll = document.documentElement.clientWidth;
    var docHeightAll = document.documentElement.clientHeight;

    console.log("width", docWidthAll)
    console.log("height", docHeightAll)

    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        var loadImg = document.getElementById('downContent');//选取id为test的元素
        loadImg.style.display = 'none';	// 隐藏选择的元素
        init();
        var loadImg = document.getElementById('loadImg');//选取id为test的元素
        loadImg.style.display = 'block';	// 隐藏选择的元素
        //BEGIN-回到顶部
        var stimer = null;
        backTopObj = document.getElementById("backTop");
        backTopObj.onclick = function () {
            cancelAnimationFrame(stimer);
            stimer = requestAnimationFrame(function fn() {
                var oTop = document.body.scrollTop || document.documentElement.scrollTop;
                //获取当前距离顶部距离
                if (oTop > 0) {
                    document.body.scrollTop = document.documentElement.scrollTop = oTop - 70;
                    stimer = requestAnimationFrame(fn);
                } else {
                    cancelAnimationFrame(stimer);
                }

            });
        }
        //END-回到顶部

        //BEGIN-滚动处理
        // 监听滚动停止
        let t1 = 0;
        let t2 = 0;
        let timer = null; // 定时器

        var p = 0,
            t = 0;
        var updownkey = 0;//判断home4
        var upDownKeyProgress = 0;//下
        $(window).scroll(function () {

            // $("navbar").hide();
            // var navbar = document.getElementById("navbar");
            // //console.log("123")
            // var st = document.body.scrollTop || document.documentElement.scrollTop;
            // var deh = document.documentElement.clientHeight;
            // //console.log("st:"+st+",deh:"+deh+',height:'+navbar.offsetHeight)
            // navbar.style.top = st/0.711224 + "px";
            // $("#navbar").fadeIn(3000);

            //

            p = $(this).scrollTop();
            if (t < p) {
                //console.log('下' + p)
                upDownKeyProgress = 0;
                //下滚
            } else {
                // console.log('上' + p)
                upDownKeyProgress = 1;
                //上滚            
            }
            //console.log("p:" + p)
            //木醋动静切换
            var docHeight = document.documentElement.clientHeight;
            var designHeight = 900;
            var heightRatio = docHeight / designHeight;

            var value = document.getElementById('progressstatic').getAttribute("style");
            value = value.match(/margin-top:-(\S*)px/)[1];
            //start: -2650px, end:-620px

            //console.log("value:"+value+",p"+p)

            if (p >= 200) {
                if (p <= 5000) {
                    if (value >= 620) {
                        if (value <= 2650) {
                            //console.log("符合")
                            // 进度条木醋动静态切换
                            p = p - 400;
                            setTimeout(function () { t = p; }, 1000)

                            scrollTop = p

                            t1 = $(window).scrollTop()

                            //var top = parseInt(parseFloat(0) - 0.96 * parseFloat(scrollTop))
                            //console.log(scrollTop)
                            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
                                if (upDownKeyProgress == 0) {
                                    var top = parseInt(parseFloat(3000) - 3.9 * parseFloat(scrollTop))
                                }
                                if (upDownKeyProgress == 1) {
                                    var top = parseInt(parseFloat(3000) - 3.9 * parseFloat(scrollTop))
                                }
                            }
                            else {
                                if (upDownKeyProgress == 0) {
                                    var top = parseInt(parseFloat(3000) - 1.3 * parseFloat(scrollTop))
                                }
                                if (upDownKeyProgress == 1) {
                                    var top = parseInt(parseFloat(3000) - 1.3 * parseFloat(scrollTop))
                                }
                            }

                            //console.log("top",top)
                            if (top < 620) {
                                top = 620
                            }
                            if (top > 2650) {
                                top = 2650
                            }
                            //console.log("top:" + top)
                            document.getElementById('progressstatic').setAttribute("style", "z-index: 9999;position: absolute;margin-left: 1850px;margin-top:-" + top + "px;");
                            document.getElementById('progressstatic').setAttribute("src", "https://2021.igem.org/wiki/images/1/1d/T--SZPT-CHINA--progressGIF.gif");
                            timer = setTimeout(isScrollEnd, 500)
                            //console.log("变了")
                            function isScrollEnd() {
                                t2 = $(window).scrollTop();
                                if (t2 == t1) {
                                    clearTimeout(timer)
                                    //console.log("滚动停止", t2) // 这里处理
                                    document.getElementById('progressstatic').setAttribute("src", "https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--progress_static.png");
                                }

                            }
                        }
                    }
                }
            }

            //插图四移动
            var value = document.getElementById('home4').getAttribute("style");
            if (value.match(/margin-top:(\S*)px/) == null) {
                value = 99999;
            } else {
                value = value.match(/margin-top:(\S*)px/)[1]
            }

            //console.log("p:" + p + ",value:" + value)
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
                //手机端时
                if (p > 450) {
                    if (value < 26) {
                        if (updownkey == 0) {
                            //console.log("滑动")
                            // var value = document.getElementById('home4').getAttribute("style");
                            // value = value.match(/margin-top: (\S*)px/)[1];
                            var top = -74 + parseInt(parseFloat(0) + 0.6 * parseFloat(p)) - 280
                            //console.log(top)
                            document.getElementById('home4').setAttribute("style", "z-index: 999;position: absolute;margin-left: 960px;margin-top:" + top + "px;");
                        }

                    }
                    else if (value >= 26) {
                        if (value >= 99999) {
                            //判断home4消失时
                        } else {
                            //console.log("出现")
                            updownkey = 1;
                            var tt = document.getElementById('home4');//选取id为test的元素
                            tt.style.display = 'none';	// 隐藏选择的元素
                            console.log("home4消失")
                            var bottomsrc = document.getElementById('home4bottom').getAttribute("src");
                            if (bottomsrc == "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif") {

                            } else {
                                document.getElementById('home4bottom').setAttribute("src", "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif");
                            }
                        }

                    }
                }
            } else {
                //pc时
                console.log("value:" + value)
                console.log("p:" + p)
                if (p > 1350) {
                    if (value < 300) {
                        if (updownkey == 0) {
                            console.log("滑动")
                            // var value = document.getElementById('home4').getAttribute("style");
                            // value = value.match(/margin-top: (\S*)px/)[1];
                            var top = -74 + parseInt(parseFloat(0) + 0.6 * parseFloat(p)) - 540
                            //console.log(top)
                            document.getElementById('home4').setAttribute("style", "z-index: 999;position: absolute;margin-left: -403px;margin-top:" + top + "px;");
                        }
                        console.log("1")
                    }
                    if (value >= 301) {
                        console.log("2")
                        console.log("出现")
                        updownkey = 1;
                        var tt = document.getElementById('home4');//选取id为test的元素
                        tt.style.display = 'none';	// 隐藏选择的元素

                        var bottomsrc = document.getElementById('home4bottom').getAttribute("src");
                        if (bottomsrc == "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif") {

                        } else {
                            document.getElementById('home4bottom').setAttribute("src", "https://2021.igem.org/wiki/images/5/52/T--SZPT-CHINA--team-home_4g.gif");
                        }


                    }
                } else {
                    //console.log("3")
                }
            }
            //END-插图四移动
        })

    })
    //END-滚动处理

    //BEGIN-loading
    var loadhidekey = 0;
    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        testDiv = document.getElementById("bcbg");
        //init();
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);



        if (loadhidekey == 0) {
            setTimeout(function () {
                //$("#loaderDownId").hide();
                //滑到顶部
                document.body.scrollTop = document.documentElement.scrollTop = 0;
                //loading隐藏
                $("#loadingHome").hide();
                var loadImg = document.getElementById('downContent');//选取id为test的元素
                loadImg.style.display = 'block';	// 隐藏选择的元素
                //设置src，让gif播放
                document.getElementById('titlegif').setAttribute("src", "https://2021.igem.org/wiki/images/0/09/T--SZPT-CHINA--team-home_maing.gif")
                //加入顶部head
                document.body.append(document.getElementById('head'))

                // $("#loading").hide();
            }, 3000);

        }
        else if (loadhidekey == 0) {
            //视频没加载好
            loadhidekey = 1;
        }
    }
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }


    //END-loading



</script>
<!-- END-JS -->


<body class="pc" id="main">
    <!-- loading -->


    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height: 3000%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 2%;width: auto;left: 0%;margin:0px auto;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>

    <div id="downContent">
        <div>
            <!-- 标题视频 -->
            <div style="height: 970px;width: 1920px;">
                <!-- <video id="imageId" autoplay="autoplay" muted="muted" style="position:absolute;z-index: 9999;"
                oncanplaythrough="hideLoad()">
                <source src="https://2021.igem.org/wiki/images/9/91/T--SZPT-CHINA--team-home.mp4" type="video/mp4">
            </video> -->
                <img id="titlegif" style="position:absolute;z-index: 9999;"
                    src="https://2021.igem.org/wiki/images/0/09/T--SZPT-CHINA--team-home_maing.gif"></img>
            </div>
        </div>
        <!-- 第一段 -->
        <div style="width:1920px;height:470px;background-color:#f2978b;color:white;text-align:center;margin-top:110px">
            <div style="display: flex;margin-left: 400px;">
                <image src="https://2021.igem.org/wiki/images/f/f3/T--SZPT-CHINA--team-home_1g.gif"
                    style="margin-top: 60px;width: 400px;"></image>
                <!-- <div class="justify" style="margin-left: 100px;margin-top: 120px;width: 777px;">Bacterial infection is the
                focus of burn
                treatment. Many
                patients are aggravated by
                bacterial infection, resulting in amputation or even death.</div> -->
                <image src="https://2021.igem.org/wiki/images/1/11/T--SZPT-CHINA--home-fontpic-1.png"
                    style="width: 829px;height: 246px;margin-top: 92px;margin-left: 99px;"></image>
            </div>
        </div>
        <!-- 第二段 -->
        <div style="width:1920px;height:440px;background-color:#f6c4bc;margin-top:0px;color:white;text-align:center;">
            <div style=" display: flex;text-align:center;">
                <div style="display: flex;margin-left: 150px;">
                    <!-- <div class="justify" style="width: 763px;margin-top: 70px;"><i>Pseudomonas aeruginosa </i>is among the
                    leading
                    causes of nosocomial infection primarily because it is intrinsically resistant to many antibiotics
                    and antimicrobials.</div> -->
                    <image src="https://2021.igem.org/wiki/images/8/85/T--SZPT-CHINA--home-fontpic-2.png"
                        style="width:785px;height: 281px;margin-top: 75px;margin-left: 19px;"> </image>
                    <image src="https://2021.igem.org/wiki/images/e/e6/T--SZPT-CHINA--team-home_2g.gif"
                        style="margin-left: 100px;"> </image>
                </div>
            </div>
        </div>
        <!-- 第三段 -->
        <div style="background-color: #fcdfc8;width: 1920px;height: 15px"></div>
        <div style="width:1920px;height:600px;background-color:#fcdfc8;margin-top:0px;color:white;text-align:center;">
            <div style=" display: flex;">
                <div style="display: flex;margin-left: 150px;">
                    <!-- <div class="justify" style="width: 820px;"><i>Gluconacetobacter hansenii </i>ATCC 53582 has been
                    designed
                    by the
                    tools of synthetic biology to produce bacterial cellulose as burn wound dressing under near-infrared
                    light and release antipseudomonal proteins to fight <i>P. aeruginosa </i>infection under blue light.
                </div> -->
                    <image src="https://2021.igem.org/wiki/images/f/fd/T--SZPT-CHINA--home-fontpic-3.png"
                        style="width: 818px;height: 397px;margin-top: 100px;"></image>
                    <image src="https://2021.igem.org/wiki/images/7/73/T--SZPT-CHINA--team-home_s.png"
                        style="width: 150px;height: 50px;margin-top: 500px;margin-left: 100px;"></image>
                    <image src="https://2021.igem.org/wiki/images/8/80/T--SZPT-CHINA--team-home_jt.png"
                        style="width: 150px;height: 150px;margin-top: 350px;"></image>

                    <image src="https://2021.igem.org/wiki/images/8/80/T--SZPT-CHINA--team-home_3g.gif"
                        style="width: 300px;height: 300px;margin-top: 200px;"></image>
                </div>
            </div>
        </div>
        <!-- 中间过渡 -->
        <img src="https://2021.igem.org/wiki/images/4/4f/T--SZPT-CHINA--home_six.png" width="1920px;"
            height="420px"></img>

        <!-- 第四段 -->
        <div style="width:1920px;height:670px;background-color:#f8c8b2;margin-top:-60px;color:white;">
            <!-- <div class="justify" style="width: 800px;padding-top: 50px;margin-left: 600px;">Our product is in the form of
            live bacteria. We devote ourselves to help burn patients in need.</div> -->
            <image src="https://2021.igem.org/wiki/images/1/10/T--SZPT-CHINA--home-fontpic-4.png"
                style="width:749px;height: 210px;margin-top: 80px;margin-left: 609px;"></image>

            <image id="home4" src="https://2021.igem.org/wiki/images/e/e4/T--SZPT-CHINA--team-home_4down.png"
                style="z-index: 999;position: absolute;margin-left: -403px;margin-top:193px"></image>
            <br>
            <image id="home4bottom" src="https://2021.igem.org/wiki/images/c/cd/T--SZPT-CHINA--team-home_4c.png"
                style="margin-left: 900px;margin-top: 100px;"></image>
        </div>
    </div>
    <!-- 底部过度 -->
    <img src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--home_seven.png" width="1920px" height="400px"></img>

    <div style="width:1920px;height:20px;background-color:#65bcd1;margin-top:0px;color:white;text-align:center;"></div>
    <div style="width:1920px;height:300px;background-color:#65bcd1;margin-top:0px;color:white;text-align:center;">
        <!-- 深职院校徽 -->
        <div>

            <image src="https://2021.igem.org/wiki/images/7/7b/T--SZPT-CHINA--home-pic-plus-1.png" class="picBottom"></image>

            <image src="https://2021.igem.org/wiki/images/4/4d/T--SZPT-CHINA--home-pic-plus-2.png" class="picBottom"></image>

            <image src="https://2021.igem.org/wiki/images/4/42/T--SZPT-CHINA--sponsors.png" class="picBottom"></image>

            <image src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--home-pic-chlogo.png" class="picBottom"></image>

            <image src="https://2021.igem.org/wiki/images/d/dd/T--SZPT-CHINA--home-pic-plus-5.png" class="picBottom"></image>

            <image src="https://2021.igem.org/wiki/images/2/28/T--SZPT-CHINA--home-pic-plus-6.png" class="picBottom"></image>


        </div>
        <div style="text-align: center;color: white;margin-top: 40px;font-size: 200%;position: absolute;z-index: 99;margin-left: 800px;">E-mail: szpt_igem@163.com</div>
        <!-- 底部涨潮 -->
        <div id="seaDiv" style="z-index: 999;position: absolute;margin-top:-200px;width:1920px">
            <img src='https://2021.igem.org/wiki/images/4/47/T--SZPT-CHINA--BC0725_1.png' id="bcbg"
                style="width:1920px;margin-top: 0px; opacity: 0.6;height:200px">
        </div>
    </div>
    <!-- 进度条木醋 -->
    <img id="progressstatic" class="box" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--progress_static.png"
        width="40px" height="60px" style="z-index: 9999;position: absolute;margin-left: 1850px;margin-top:-2650px;">
    <!-- 右侧进度条 -->
    <div style="z-index:999;position:absolute;margin-top:-2700px">
        <div>
            <!-- 进度条白色 -->
            <img src="https://2021.igem.org/wiki/images/7/7a/T--SZPT-CHINA--progressPNG.png" width="10px"
                height="2040px" style="margin-left:1870px;margin-top: 90px;z-index: 2;">
        </div>
    </div>
    <!-- 进度条下绿脓杆菌 -->
    <img id="progressstaticgreen" src="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--green.png" width="80px"
        height="80px" style="margin-left:1830px;margin-top: -620px;z-index: 999;position: absolute;">
    <div>
        <!-- 回到顶部 -->
        <img id="backTop" src="https://2021.igem.org/wiki/images/c/c1/T--SZPT-CHINA--backTop.png" width="90px"
            height="140px" style="margin-left:1700px;margin-top: -490px;z-index: 9999999;position: absolute;">
        <!-- 铜绿 -->
        <img id="bacteriagreen" src="https://2021.igem.org/wiki/images/2/29/T--SZPT-CHINA--green.png" width="140px"
            height="200px" style="margin-left:1600px;margin-top: -3000px;z-index: 1;position: absolute;">
        <!-- 皮肤细胞哭 -->
        <img id="bacteriacrytop" src="https://2021.igem.org/wiki/images/3/33/T--SZPT-CHINA--skin_cry.png" width="140px"
            height="140px" style="margin-left:1550px;margin-top: -2900px;z-index: 1;position: absolute;">
        <!-- 铜绿害怕 -->
        <img id="bacteriagreenafraid" src="https://2021.igem.org/wiki/images/8/88/T--SZPT-CHINA--green_afraid.png"
            width="80px" height="100px" style="margin-left:600px;margin-top: -1450px;z-index: 1;position: absolute;">
        <!-- 皮肤细胞哭 -->
        <img id="bacteriacry" src="https://2021.igem.org/wiki/images/3/33/T--SZPT-CHINA--skin_cry.png" width="100px"
            height="100px" style="margin-left:150px;margin-top: -1300px;z-index: 1;position: absolute;">
        <!-- 铜绿死 -->
        <img id="bacteriadie" src="https://2021.igem.org/wiki/images/3/3d/T--SZPT-CHINA--green_die.png" width="80px"
            height="80px" style="margin-left:360px;margin-top: -640px;z-index: 1;position: absolute;">
    </div>
</body>
</body>
<!-- BEGIN-CSS -->

<!-- BEGIN-文本左右对齐 -->
<style>
    .justify {
        text-align: justify;
        width: 790px;
        font-size: 38px;
        line-height: 60px;
        margin-left: 30px;
        margin-top: 60px;
    }
    .picBottom{
        margin-left: 57px;
        height: 100px;
        margin-top: 50px;
    }
</style>
<!-- END-文本左右对齐 -->
<!-- BEGIN-igem特有 -->
<style>
    #sideMenu,
    #top_title,
    .patrollink,
    #firstHeading,
    #home_logo,
    #sideMenu {
        display: none;
    }

    #content {
        padding: 0px;
        width: 1920px;
        margin-top: -7px;
        margin-left: 0px;
        border: none;
    }

    body,
    html {
        width: 100%;
        height: 100%;
    }

    #bodyContent h1,
    #bodyContent h2,
    #bodyContent h3,
    #bodyContent h4,
    #bodyContent h5 {
        margin-bottom: 0px;
    }

    #bodyContent a[href ^="https://"],
    .link-https {
        padding-right: 25px;
    }
</style>
<!-- END-igem特有 -->
<!-- END-CSS -->
<!-- BEGIN层级 最高级-->

<!-- loading -->

<!-- 进度条 -->

<!-- 海潮 -->


<!-- END层级 最低级-->

<!-- 少更改区 -->
<!-- BEGIN-页面底部海潮和消失 -->
<script>
    //BEGIN-
    var testDiv;
    var divwidth;
    var divheight;
    var temp = 0;
    function seaBg() {
        divwidth = testDiv.clientWidth;
        divheight = testDiv.offsetHeight;
        if (divheight <= 5460) {
            //divwidth += 1;
            divheight += 2;
            //testDiv.style.width = divwidth + "px";
            testDiv.style.height = divheight + "px";
            temp += 2;
            testDiv.style.margin = (0 - temp) + "px 0px 0px 0px";
            //console.log(divheight)
        }
    }



    function getScrollTop() {
        var scrollTop = 0, bodyScrollTop = 0, documentScrollTop = 0;
        if (document.body) {
            bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
            documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;
        return scrollTop;
    }
    //文档的总高度
    function getScrollHeight() {
        var scrollHeight = 0, bodyScrollHeight = 0, documentScrollHeight = 0;
        if (document.body) {
            bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
            documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;
        return scrollHeight;
    }
    function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
            windowHeight = document.documentElement.clientHeight;
        } else {
            windowHeight = document.body.clientHeight;
        }
        return windowHeight;
    }
    /**kid逐渐消失*/
    function dieout() {
        var oImg = document.getElementById("kid"); //获得图片obj
        var iAlpha = 60;//用来定义默认的图片的透明度
        die(oImg);
        var oTimer = null;
    }
    //定时器
    function changeOpacity(obj, iTarget, iAlpha) {
        var oTimer = null;
        clearInterval(oTimer);
        //关闭定时器
        var iSpeed = 0;
        //速度
        if (iAlpha < iTarget) {
            iSpeed = 15;
        } else {
            iSpeed = -15;
        };
        oTimer = setInterval(function () {
            if (iAlpha == iTarget) {
                clearInterval(oTimer);
            } else {
                iAlpha += iSpeed;
                //设置透明度
                obj.style.opacity = iAlpha / 100;
                obj.style.filter = "alpha(opacity=" + iAlpha + ")";
            };
        }, 700);

    }
    function die(oImg) {//逐渐消失
        iAlpha = 100;
        oImg.style.opacity = 1;//设置透明度
        oImg.style.filter = 'alpha(opacity=100)';//设置透明度 IE
        changeOpacity(oImg, 0, iAlpha);
    };
    var keyBottom = 1;


    window.onscroll = function () {
        //console.log('getScrollTop()', getScrollTop())
        //console.log('getWindowHeight()', getWindowHeight())
        //console.log('getScrollHeight()', getScrollHeight())
        if (getScrollTop() == 0) {
            console.log('到顶部')
        }
        if (getScrollTop() + getWindowHeight() >= getScrollHeight()) {
            console.log("到底部")
        }
        var value = document.getElementById('progressstatic').getAttribute("style");
        value = value.match(/margin-top:-(\S*)px/)[1];
        // console.log(v)
        if (value == 620) {
            //console.log("<=")
            if (keyBottom != 0) {
                keyBottom = 0;
                // console.log("已经到最底部了！!");
                //死掉的绿脓杆菌
                var oImg1 = document.getElementById("bacteriadie"); //获得图片obj
                var iAlpha = 60;//用来定义默认的图片的透明度
                die(oImg1);
                var oTimer = null;

                setTimeout(function () {
                    //皮肤细胞哭
                    var oImg2 = document.getElementById("bacteriacry"); //获得图片obj
                    var iAlpha = 60;//用来定义默认的图片的透明度
                    die(oImg2);
                    var oTimer = null;
                    //
                }, 100);
                setTimeout(function () {
                    //害怕的绿脓杆菌
                    var oImg3 = document.getElementById("bacteriagreenafraid"); //获得图片obj
                    var iAlpha = 60;//用来定义默认的图片的透明度
                    die(oImg3);
                    var oTimer = null;

                }, 2000);
                setTimeout(function () {
                    //皮肤细胞哭
                    var oImg4 = document.getElementById("bacteriacrytop"); //获得图片obj
                    var iAlpha = 60;//用来定义默认的图片的透明度
                    die(oImg4);
                    var oTimer = null;
                    //绿脓
                    var oImg5 = document.getElementById("bacteriagreen"); //获得图片obj
                    var iAlpha = 60;//用来定义默认的图片的透明度
                    die(oImg5);
                    var oTimer = null;


                }, 5000);

                //进度条最下面的绿脓杆菌
                var oImg6 = document.getElementById("progressstaticgreen"); //获得图片obj
                var iAlpha = 60;//用来定义默认的图片的透明度
                die(oImg6);
                var oTimer = null;

                setInterval(seaBg, 0);


            }
        }
    };

</script>
<!-- END-页面底部海潮和消失 -->
<!-- BEGIN-适配 -->
<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        document.getElementById('content').style = `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight
            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio + ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 930;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->

</html>